<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <input type="checkbox" id="all">我全都要<br>
  <input type="checkbox" class="girl">西施<br>
  <input type="checkbox" class="girl">貂蝉<br>
  <input type="checkbox" class="girl">杨贵妃<br>
  <input type="checkbox" class="girl">王昭君<br>

  <script>
    // 1.先获取元素
    let all = document.querySelector('#all');
    let girls = document.querySelectorAll('.girl');

    // 2.给all 注册点击事件
    all.onclick = function(){
      for(let i=0;i<girls.length;i++){
        // all.checked 就是这个 all 这个复选框的选中状态
        girls[i].checked = all.checked;

      }      
    }

    // 3. 给girl 注册点击事件，实现对于 all 的取消操作
    for(let i = 0;i<girls.length;i++){
      girls[i].onclick = function(){
        all.checked = checkgirls(girls);
      }
    }

    function checkgirls(){
      // 判断是不是所有 girl 都被选中了
      for(let i =0;i<girls.length;i++){
        if(! girls[i].checked)
        return '';
      }
      // 遍历了一圈，所有妹子都是被选中，那么all也是被选中状态
      return 'checked';
    }
  </script>
  
  
</body>
</html>